
<template>
  <el-cascader ref="cascader" v-loading="loading != 0"  element-loading-spinner="el-icon-loading" :value="propsValue" :show-all-levels="true" @change="cascaderChange"
    :props="cascader_props" :placeholder="$tt('tip_please_select_region')" :filterable="true"></el-cascader>
</template>
<script>
export default {
  props: {
    province: {
      type: String,
      default: null,
    },
    city: {
      type: String,
      default: null,
    },
    county: {
      type: String,
      default: null,
    },
    zipCode: {
      type: String,
      default: null,
    },
    level: {
      type: Number,
      default: 2,
    },
  },
  data() {
    return {
      loading: 0,
      cascader_props: {
        lazy: true, emitPath: true,
        lazyLoad: this.cascaderLoad
      },
    }
  },
  computed: {
    propsValue() {
      let out = []
      if (this.province) {
        out.push(this.province)
        if (this.city && this.level >= 1) {
          out.push(this.city)
          if (this.county && this.level >= 2) {
            out.push(this.county)
          }
        }
      }
      return out
    },
    propsLabel() {
      return this.propsValue.join(' / ')
    },
  },
  watch: {
    propsLabel: function (val) {
      this.$nextTick(() => {
        if (this.$refs.cascader) {
          this.$refs.cascader.inputValue = val
        }
      })
    },
  },
  methods: {

   async cascaderChange(e) {
      this.$emit('input', e)
      this.$emit('change', e)

      await this.$nextTick()
      if (this.$refs.cascader) {
        const node = this.$refs.cascader.getCheckedNodes();
        if (_.isEmpty(node)) return
        const nodePath = _.head(node).pathNodes;
        if (nodePath && nodePath.length >= (this.level + 1)) {

          this.$emit(
            "update:province", nodePath[0].data.value
          );
          this.$emit(
            "update:city", nodePath.length >= 2 ? nodePath[1].data.value : null
          );
          this.$emit(
            "update:county", nodePath.length >= 3 ? nodePath[2].data.value : null
          );
          this.$emit(
            "update:zipCode", nodePath.length >= 3 ? nodePath[2].data.zipCode : null
          );


        }
      }
    },
    cascaderLoad(node, resolve) {

      const { level, path } = node;
      let data = {}
      data.countryCode = "CN"
      if (path) {
        if (path.length > 0) data.provDistCd = path[0]
        if (path.length > 1) data.cityDistCd = path[1]
      }

      this.loading = this.loading + 1
      this.$ajax({
        url: "/tms-api/base/TmsPlaceInfoRpc/selectAddressLabelDTO.json",
        method: 'post',
        data,
        tip: false,
        success: (res) => {
          if (res.data && res.data.rows) {
            resolve(res.data.rows.map(it => {
              let item = { value: it.address }
              if (it.zipCode) {
                item.label = this.$formatNameCode(it.address, it.zipCode)
                item.zipCode = it.zipCode
                item.leaf = level >= this.level
              } else {
                item.label = it.address
                item.leaf = level >= this.level
              }
              return item

            }));
          }
        },
        complete: () => {
          this.loading = this.loading - 1
        }
      })
    },
  },
}
</script>
